<template>
	<view :data-theme="theme">
		<useNavBar :title="$t(`page.users.logistics.navTitle`)">
					<view slot="right" style="color:#fff" class="iconfont icon-more" @click="open"></view>
				</useNavBar>
		<view class='logistics'>
			<view class='logisticsCon'>
				<view class='company acea-row row-between-wrapper'>
					<view class='picTxt acea-row row-between-wrapper'>
						<view class='iconfont icon-wuliu'></view>
						<view class='text'>
							<view><text class='name line1'>{{$t(`page.users.logistics.expName`)}}: </text> {{orderInfo.expName}}</view>
							<view class='express line1'><text class='name'>{{$t(`page.users.logistics.expNo`)}}: </text> {{orderInfo.expNo}}</view>
						</view>
					</view>
					<view class='copy copy-data' @click="copy(orderInfo.expNo)">{{$t(`page.orderDetails.copy`)}}</view>
				</view>
				<view class='item' v-for="(item,index) in expressList" :key="index">
					<view class='circular' :class='index === 0 ? "on":""'></view>
					<view class='text' :class='index===0 ? "on-font on":""'>
						<view>{{item.AcceptStation}}</view>
						<view class='data' :class='index===0 ? "on-font on":""'>{{item.AcceptTime}}</view>
					</view>
				</view>
			</view>
			<recommend v-if="expressList.length== 0"></recommend>
		</view>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
	</view>
</template>

<script>
	import {
		express
	} from '@/api/order.js';
	import {
		//getProductHot
	} from '@/api/store.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import { mapState } from 'pinia'
	import { useAppStore } from '@/stores/app'
	let app = getApp();
	export default {
		data() {
			return {
				orderId: '',
				orderInfo: {},
				expressList: [],
				hostProduct: [],
				loading: false,
				goodScroll: true,
				params: { //精品推荐分页
					page: 1,
					limit: 10,
				},
				rightDrawer: false,
				theme:'theme3',
			};
		},
		computed: mapState(useAppStore,['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getExpress();
					}
				},
				deep: true
			}
		},
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.$t(`page.users.logistics.navTitle`)
			})
			if (!options.orderId) return this.$util.Tips({
				title: this.$t('message.pay.errorOrder')
			});
			this.orderId = options.orderId;
			if (this.isLogin) {
				this.getExpress();
			} else {
				toLogin();
			}
		},
		methods: {
			copy(data) {
				uni.setClipboardData({
					data,
					success: ()=> {
						this.$util.Tips({
							title: this.$t('page.orderDetails.copySuccess')
						});
					}
				});
			},
			/**
			 * 授权回调
			 */
			onLoadFun: function() {
				this.getExpress();
			},
			copyOrderId: function() {
				uni.setClipboardData({
					data: this.orderInfo.deliveryId
				});
			},
			getExpress: function() {
				let that = this;
				express(that.orderId).then(function(res) {
					that.$set(that, 'orderInfo', res.data);
					if(res.data.logisticsInfo){
						let express = JSON.parse(res.data.logisticsInfo);
						that.$set(that, 'expressList', express.reverse());
					}
					
				});
			},
			open(){
				this.rightDrawer = true
			},
			closeDrawer(e) {
				this.rightDrawer = false
				if(!e){
					this.rightDrawer = false
				}
			},
			returns(){
				uni.navigateBack()
			},
		},
		// 滚动到底部
		onReachBottom() {

			if (this.params.page != 1) {
			}
		},
	}
</script>

<style scoped lang="scss">
	.logistics .header {
		padding: 23rpx 30rpx;
		background-color: #fff;
		height: 166rpx;
		box-sizing: border-box;
	}

	.logistics .header .pictrue {
		width: 120rpx;
		height: 120rpx;
	}

	.logistics .header .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.logistics .header .text {
		width: 540rpx;
		font-size: 28rpx;
		color: #999;
		margin-top: 6rpx;
	}

	.logistics .header .text .name {
		width: 365rpx;
		color: #282828;
	}

	.logistics .header .text .money {
		text-align: right;
	}

	.logistics .logisticsCon {
		background-color: #fff;
	}

	.logistics .logisticsCon .company {
		height: 120rpx;
		margin: 0 0 45rpx 30rpx;
		padding-right: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.logistics .logisticsCon .company .picTxt {
		width: 520rpx;
	}

	.logistics .logisticsCon .company .picTxt .iconfont {
		width: 50rpx;
		height: 50rpx;
		background-color: #666;
		text-align: center;
		line-height: 50rpx;
		color: #fff;
		font-size: 35rpx;
	}

	.logistics .logisticsCon .company .picTxt .text {
		width: 450rpx;
		font-size: 26rpx;
		color: #282828;
	}

	.logistics .logisticsCon .company .picTxt .text .name {
		color: #999;
	}

	.logistics .logisticsCon .company .picTxt .text .express {
		margin-top: 5rpx;
	}

	.logistics .logisticsCon .company .copy {
		font-size: 20rpx;
		width: 106rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 20rpx;
		border: 1rpx solid #999;
	}

	.logistics .logisticsCon .item {
		padding: 0 40rpx;
		position: relative;
	}

	.logistics .logisticsCon .item .circular {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		position: absolute;
		top: -1rpx;
		left: 31.5rpx;
		background-color: #ddd;
	}

	.logistics .logisticsCon .item .circular.on {
		background-color: $theme-color;
	}

	.logistics .logisticsCon .item .text.on-font {
		color: $theme-color;
	}

	.logistics .logisticsCon .item .text .data.on-font {
		color: $theme-color;
	}

	.logistics .logisticsCon .item .text {
		font-size: 26rpx;
		color: #666;
		width: 615rpx;
		border-left: 1rpx solid #e6e6e6;
		padding: 0 0 60rpx 38rpx;
	}

	.logistics .logisticsCon .item .text.on {
		border-left-color: #f8c1bd;
	}

	.logistics .logisticsCon .item .text .data {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.logistics .logisticsCon .item .text .data .time {
		margin-left: 15rpx;
	}
</style>
